<template>
	<div class="selectGrade">
		<h2 class="title">选择年级</h2>
		<divider>小学</divider>
		<ul>
			<li v-for="(val,i) in listA">
				<span class="item">{{val}}年级</span>
			</li>
		</ul>
		<divider>初中</divider>
		<ul>
			<li v-for="(val,i) in listB">
				<span class="item">{{val}}年级</span>
			</li>
		</ul>
		<divider>高中</divider>
		<ul>
			<li v-for="(val,i) in listC">
				<span class="item paddingA">高{{val}}</span>
			</li>
		</ul>
		<div class="return" @click="goBack">
			<img src="../assets/return.png" alt="">
		</div>
		<x-button class='btn' :disabled='isDisabled' @click.native='close' type="primary">确定</x-button>
	</div>

</template>
<script>
	import {
		Divider,
		XButton,
	} from 'vux'

	export default {
		components: {
			Divider,
			XButton,
		},
		data() {
			return {
				listA: ['一', '二', '三', '四', '五', '六'],
				listB: ['七', '八', '九'],
				listC: ['一', '二', '三'],
				isDisabled: false,
			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			goBack() {
				this.$router.back();
			},
			close() {
				this.$emit('closeSelectPage')
			}
		},


	}
</script>

<style lang="less" scoped="scoped">
	.selectGrade {
		width: 100%;
		height: 100%;
		overflow: hidden;

		text-align: center;
		position: relative;
		z-index: 9;

		.btn {
			position: absolute;
			bottom: 0;
		}

		.return {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 10px;
			left: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			padding-top: 5px;
			font-weight: normal;
		}

		ul {
			list-style: none;
			width: 100%;
			margin: 0;
			padding: 0;

			li {
				width: 33.33%;
				float: left;
				margin: 25px 0;
				color: #a7a4a4;

				.item {
					padding: 20.5px 7px;
					border: 1px solid #a7a4a4;
					border-radius: 50%;
				}

				.paddingA {
					padding: 20.5px 15px;
				}
			}
		}
	}
</style>
